<template>
    <div id="count" style="background-color: #F3F4F6; overflow: hidden;">
        <div id="box">
            <p>我们不会以任何名义主动向您致电告知在商城购物时支付失败或要求协助退款，更不会要求您提供卡号、身份证信息、qq、支付宝、微信等信息。请您警惕此类电话，如有订单或商品问题，请拨打11185-4。</p>
        </div>
        <div id="top">
            <div class="top-count">
                <div class="home">
                    <i class="fa fa-home" style="color: red; font-size: 20px;"></i>
                    <router-link  style="margin-left: 5px;" to="/shouye">Tom首页</router-link>
                </div>
                <div class="top-fr fr clearfix">
                    <ul>
                        <li>您好，欢迎来到游乐网！</li>
                        <li><a href="javaScript:;" style="color: #0066CC;">[请登录]</a><a href="javaScript:;" style="color: #0066CC;">[免费注册]</a></li>|
                        <li><a href="javaScript:;">我的游乐</a></li>|
                        <li><a href="javaScript:;"><i class="fa fa-mobile" style="font-size: 20px;"></i> 手机游乐</a></li>|
                        <li><a href="javaScript:;">全部商品分类</a></li>|
                        <li><a href="javaScript:;">网站地图</a></li>|
                        <li><a href="javaScript:;">帮助中心</a></li>|
                        <li><a href="javaScript:;"><i class="fa fa-volume-control-phone" style="font-size: 18px;"></i> 11185</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="logo">
            <img src="https://i0.ulecdn.com/ule/header/images/logo.png" >
            <div class="ipt">
                <input type="text" placeholder="邮特惠会员，天天享特惠！"/>
                <i class="fa fa-search"></i>
            </div>
            <div class="shopping">
                <ul>
                    <li>
                        <i class="fa fa-shopping-cart" style="color: #C51010; font-size: 20px;"></i>
                        <a href="javaScript:;">购物车&ensp;|</a>
                    </li>
                    <li ><span style="color: #C51010;">0</span> <i class="fa fa-angle-down" style="color: #999;"></i></li>
                </ul>
            </div>
        </div>
        <div id="nav">
            <ul>
                <li style="background-color: #B82424;"><i class="fa fa-align-left" style="margin-right: 10px;"></i>全部商品分类 <i class="fa fa-arrow-circle-right"style="margin-left: 20px;"></i></li>
                <li>天天特卖</li>
                <li>优惠券</li>
                <li>邮政农品</li>
                <li>生活缴费</li>
                <li>游乐旅行</li>
                <li>游特惠</li>
                <li>游惠购积分</li>
            </ul>
        </div>
        <div id="banner">
            <div id="more">
                <ul class="more-con">
                    <li><a href="javaScript:;">特色美食</a></li>
                    <li><a href="javaScript:;">美妆洗护</a></li>
                    <li><a href="javaScript:;">家具生活</a></li>
                    <li><a href="javaScript:;">厨卫清洁</a></li>
                    <li><a href="javaScript:;">家用电器</a></li>
                    <li><a href="javaScript:;">母婴玩具</a></li>
                    <li><a href="javaScript:;">箱包、配饰</a></li>
                    <li><a href="javaScript:;">手机数码</a></li>
                    <li><a href="javaScript:;">男装、女装、鞋靴</a></li>
                    <li><a href="javaScript:;">运动户外</a></li>
                    <li><a href="javaScript:;">电脑办公</a></li>
                    <li><a href="javaScript:;">汽车、图书影响</a></li>
                    <li><a href="javaScript:;">邮票、旅行、缴费</a></li>
                </ul>
            </div>
            <div class="swiper">
                <img src="https://pic0.ulecdn.com/item/user_0102/desc20211109/8b547d59d7572bf1_-1x-1.jpg" >
            </div>
        </div>
        <div id="cont">
                <ul>
                    <li><i class="i1"></i>低价来袭</li>
                    <li><i class="i2"></i>农品特卖</li>
                </ul>
                <div class="cont-div">
                    <ul>
                        <li>
                            <img src="https://pic1.ulecdn.com/pic/user_0102/product/prd20210901/fb5404f04ac342a6_p800x800_200x200.jpg" >
                            <p>燕之坊 五谷米（大米 红米 藜麦米 苦荞 青稞 红扁豆等）400g</p>
                            <span>￥12.80</span>
                        </li>
                        <li>
                            <img src="https://pic1.ulecdn.com/pic/user_0102/product/prd20210901/fb5404f04ac342a6_p800x800_200x200.jpg" >
                            <p>燕之坊 五谷米（大米 红米 藜麦米 苦荞 青稞 红扁豆等）400g</p>
                            <span>￥12.80</span>
                        </li>
                        <li>
                            <img src="https://pic1.ulecdn.com/pic/user_0102/product/prd20210901/fb5404f04ac342a6_p800x800_200x200.jpg" >
                            <p>燕之坊 五谷米（大米 红米 藜麦米 苦荞 青稞 红扁豆等）400g</p>
                            <span>￥12.80</span>
                        </li>
                        <li>
                            <img src="https://pic1.ulecdn.com/pic/user_0102/product/prd20210901/fb5404f04ac342a6_p800x800_200x200.jpg" >
                            <p>燕之坊 五谷米（大米 红米 藜麦米 苦荞 青稞 红扁豆等）400g</p>
                            <span>￥12.80</span>
                        </li>
                        <li>
                            <img src="https://pic1.ulecdn.com/pic/user_0102/product/prd20210901/fb5404f04ac342a6_p800x800_200x200.jpg" >
                            <p>燕之坊 五谷米（大米 红米 藜麦米 苦荞 青稞 红扁豆等）400g</p>
                            <span>￥12.80</span>
                        </li>
                    </ul>
                </div>
        </div>
        <div class="fae-image">
            <a href="javaScript:;"><img src="https://pic3.ulecdn.com/item/user_0102/desc20200316/77ad229e91405ba7_-1x-1.jpg" ></a>
        </div>
        <Food></Food>
        <Bottom></Bottom>
        <div id="Totop">
            <ul>
                <li @click="Totop()">
                    <img src="https://i0.ulecdn.com/ule/www/hp/2014/0710/images/returntop2.png" >
                </li>
            </ul>
        </div>
    </div>
</template>
<script type="text/javascript">
    import Food from "./Food.vue";//内容
    import Bottom from "./Bottom.vue";//底部
    export default{
        name:"Home1",
        components:{
            Bottom,
            Food
        },
        methods:{
            Totop(){
                document.body.scrollTop=document.documentElement.scrollTop=0;
            }
        }
    }
     
    
</script>
<!--scoped="scoped"样式隔离 对其他组件不影响 -->
<style type="text/css" scoped="scoped">
    @import url("../assets/css/reset.css");
    @import url("../assets/css/Home.css");
    @import url("../assets/css/font-awesome.min.css");
</style>
